<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title lang>商城</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/title.css" />
		<link rel="stylesheet" href="css/icons-extra.css" />
		
		<style>
			.mui-content{margin:0px 0px;}
			.mui-card .mui-table-view .mui-table-view-cell{background-color:#333;}
			.mui-table-view-cell:after{height:0;}
			.mui-table-view-cell{margin-bottom:10px;}
			.mui-card .mui-table-view{background-color:#1a1a1a;}
			.mui-card .mui-table-view a{color:#f0f0f0;}
			.mui-card .mui-table-view a.mui-active{background:#444;}
			.home_top{
				height: 70px;
				background: -webkit-linear-gradient(top,#fbed21,#fab538);
			}
			.mui-bar-nav~.mui-content{
				padding-top: 70px;
			}
			.home_top .mui-title{
				background: white;
				width: 60%;
				height: 30px;
				padding: 0px;
				position: absolute;
				top: 20px;
			}
			.home_top a.mui-action-back{
				color: black;
			}
			.mui-table-view-chevron .mui-table-view-cell{
				width:49%;
				float: left;
				margin: 0px;
				margin-left: 1%;
			}
			.commodity_img{
				width: 100%;
				height: 190px;
			}
			.commodity_img img{
				width: 100%;
				height: 190px;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				padding: 0px;
			}
			.commodity_main{
				background: white;
			}
			.commodity_main p{
				padding-left: 10px;
				line-height: 30px;
				color: black;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.commodity_main h5{
				color: rgb(240,90,35);
				font-size: 20px;
				padding-left: 10px;
				padding-bottom: 5px;
			}
			.commodity_search{
				display: block;
				width: 30px;
				height: 30px;
				float: left;
				background: white;
				padding: 1px;
				border: none;
			}
			.commodity_search .mui-icon{
				background: white;
				color: black;
				
			}
			.home_top .mui-title input{
				border: none;
				padding: 0px;
				height: 30px;
				position: absolute;
				left: 30px;
			}
			.home_top .mui-title span{
				background: none;
				font-size: 28px;
			}
			.cmenu-right{
				display: block;
				width: 24px;
				height: 24px;margin-right: 15px;
			}
			.cmenu-right i{
				color: black;
			}
			.commodity_class{
				width: 100%;
				height: auto;
				background: rgba(0,0,0,0.4);
				position: fixed;
				top: 70px;
				left: 0px;
				z-index: 999;
				padding-bottom:10px ;
			}
			.commodity_class ul{
				display: block;
				width: 90%;
				height: auto;
				margin: 0px 5%;
				padding: 0px;
			}
			.commodity_class li{
				width: 23%;
				height: 30px;
				float: left;
				margin: 0px 1%;
				margin-top: 10px;
				color: white;
				line-height: 30px;
				border-radius: 30px;
				list-style: none;
				text-align: center;
				background: rgb(77,77,77);
				color: #fab538;
			}
			.commodity_class h4{
				display: block;
				width: 100%;
				color: #fab538;
				margin:0px;
				margin-top: 10px;
				margin-left: 9%;
				font-size: 14px;
			}

			#shop_type ul li.selected{
				background:#fab538;
				color:#fff;
			}

			.mui-table-view-cell>a:not(.mui-btn).mui-active{
				background: none;
			}
			.mui-bar-tab .mui-tab-item.mui-active {
			    color: #fbed21;
			}
		</style>
	</head>

	<body>
		<div class="commodity_class" id="shop_type" style="display: none;">
			<ul id="store_type">
				<!--<li>服装鞋包</li>
				<li>美妆个妆</li>
				<li>家电数码</li>
				<li>母婴用品</li>
				<li>服装鞋包</li>
				<li>美妆个妆</li>
				<li>家电数码</li>
				<li>母婴用品</li>
				<div style="clear: both;"></div>-->
			</ul>
			<h4>实体商家</h4>
			<ul id="store_business">
				<!--
				<li>服装鞋包</li>
				<li>美妆个妆</li>
				<li>家电数码</li>
				<li>母婴用品</li>
				<li>服装鞋包</li>
				<li>美妆个妆</li>
				<li>家电数码</li>
				<li>母婴用品</li>
				<div style="clear: both;"></div>-->
			</ul>
			<h4 lang>全球品牌</h4>
			<ul id="store_brand">
				<!--<li>欧洲</li>
				<li>美洲</li>
				<li>亚洲</li>
				<li>澳洲</li>
				<div style="clear: both;"></div> -->
			</ul>
		</div>
		<!-- 头部 -->
		<header class="mui-bar mui-bar-nav home_top">
			<h1 class="mui-title">
				<button class="commodity_search" id="do_search"><span class="mui-icon mui-icon-search"></span></button>
				<input type="text" id="keyword" placeholder="请输入你要找的商品" lang />
			</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="cmenu-right" id="show_menu"><i class="mui-icon-extra mui-icon-extra-class"></i></a>
		</header> 
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll" style="padding-bottom:50px;">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					<!--<li class="mui-table-view-cell">
						<a>
							<div class="commodity_img"><img src="img/shop.png"></div>
							<div class="commodity_main">
								<p>苹果iphone7 全网通4G手机</p>
								<h5>5692</h5>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell"">
						<a>
							<div class="commodity_img"><img src="img/shop.png"></div>
							<div class="commodity_main">
								<p>苹果iphone7 全网通4G手机</p>
								<h5>5692</h5>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell"">
						<a>
							<div class="commodity_img"><img src="img/shop.png"></div>
							<div class="commodity_main">
								<p>苹果iphone7 全网通4G手机</p>
								<h5>5692</h5>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell"">
						<a>
							<div class="commodity_img"><img src="img/shop.png"></div>
							<div class="commodity_main">
								<p>苹果iphone7 全网通4G手机</p>
								<h5>5692</h5>
							</div>
						</a>
					</li> -->
				</ul>
			</div>
		</div>
		
		
		<!--底部导航-->
		<nav class="mui-bar mui-bar-tab " id="nav" style="background-color: #1a1a1a;">  
            <a class="mui-tab-item" id="index.html">  
                <span class="mui-icon mui-icon-home"></span>  
                <span class="mui-tab-label" lang>首页</span>  
            </a>  
            <a class="mui-tab-item" id="transaction.html">  
                <span class="mui-icon mui-icon-extra mui-icon-extra-trend"></span>  
                <span class="mui-tab-label" lang>交易</span>  
            </a>  
            <a class="mui-tab-item mui-active" id="commodity_list.html">  
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>  
                <span class="mui-tab-label" lang>商城</span>  
            </a>  
            <a class="mui-tab-item" id="wallet.html">  
                <span class="mui-icon mui-icon-extra mui-icon-extra-card"></span>  
                <span class="mui-tab-label" lang>钱包</span>  
            </a> 
            <a class="mui-tab-item" id="setting.html">  
                <span class="mui-icon mui-icon-person-filled"></span>  
                <span class="mui-tab-label" lang>我的</span>  
            </a>
        </nav>  
        
		<script src="js/mui.min.js"></script>
		<script src="js/config.js"></script>
		<script src="js/common.js"></script>
		<script src="js/sockjs.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="resource/index/guide.js"></script>
		<script src="resource/store/commodity_list.js"></script>
		<script src="lang/shop.js"></script>
		
	</body>

</html>